<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>商品分类</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .cate {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .nav {
            height: 50px;
            width: 100%;
            border-bottom: 1px solid #d4d0d0;
        }

        .list {
            flex: 1;
            width: 100%;
            display: flex;
        }

        .tabbar {
            height: 50px;
            width: 100%;
            border-top: 2px solid red;
        }

        .cate_left {
            flex: 2;
            height: 100%;
            /* border-right: 2px solid gray; */
        }

        .cate_left ul {
            width: 100%;
            height: 100%;
        }

        .cate_right {
            flex: 5;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-content: flex-start;
            flex-wrap: wrap;
            /* background-color: orange; */
        }

        .cate_right .row {
            width: 30%;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* border: 1px solid green; */
        }


        .row img {
            width: 50px;
            height: 50px;
        }

        ul li {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #d6d1d1;
            background-color: #f4f4f4;
        }

        ul li.active {
            background-color: white;
        }
    </style>
</head>

<body>
    <div class="cate">
        <div class="nav"></div>
        <div class="list">
            <!-- 左边一级分类 -->
            <div class="cate_left">
                <ul></ul>
            </div>
            <!-- 右边二级分类 -->
            <div class="cate_right">
                <!-- <div class="row">
                    <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-06/4ff20b9e-8150-4bd3-87a3-0cd6766938dd.png"
                        alt="">
                    <span>室内家具</span>
                </div> -->
            </div>
        </div>
        <div class="tabbar"></div>
    </div>
    <script>
        // 等到页面dom节点加载完毕请求一级分类数据和二级分类数据
        $(function () {
            // 1.获取全部分顶级分类数据
            $.ajax({
                url: "http://localhost:3000/catetop",
                success: ({ code, data = {} } = res) => {
                    if (code == 200) {
                        // 根据数据生成li字符串
                        let cateTop = data.data//[{id,name.pri...},{}]
                        let lisStr = cateTop.map((item, index) => {
                            if (index == 0) {
                                return `<li class=active onclick=getSub(this,${item.id})>${item.name}</li>`
                            } else {
                                return `<li onclick=getSub(this,${item.id})>${item.name}</li>`
                            }

                        }).join("")
                        // 将拼接好的li字符串添加到ul中
                        document.querySelector('ul').innerHTML = lisStr
                        // 2.根据顶级分了的id获取对应的二级分类数据（获取第一个顶级的二级孩子数据用于默认展示）
                        $.ajax({
                            url: `http://localhost:3000/catesub?id=${cateTop[0].id}`,
                            success: ({ code, msg, data = {} } = res) => {
                                if (code == 200) {
                                    let cateSub = data.data.children
                                    // 根据二级分类数据拼接右侧字符串
                                    let divStr = cateSub.map(item => {
                                        return `<div class="row">
                                                <img src="${item.picture}"
                                                    alt="">
                                                <span>${item.name}</span>
                                            </div>`
                                    }).join('')
                                    // 将拼接好的字符串添加到右侧分类div中
                                    document.querySelector('.cate_right').innerHTML = divStr
                                } else {
                                    console.log(msg)
                                }
                            },
                            fail: err => console.log(err)
                        })
                    } else {
                        console.log('通信成功但是数据请求失败！')
                    }
                },
                fail: err => console.log(err)
            })

        })
        // 2.切换二级分类函数
        function getSub(that, id) {
            // 将目前激活的li标签上的class去除
            document.querySelector('.active').className = ""
            // 给目前点击的li添加class
            that.className = "active"
            // 获取二级分类
            // 2.根据顶级分了的id获取对应的二级分类数据（获取第一个顶级的二级孩子数据用于默认展示）
            $.ajax({
                url: `http://localhost:3000/catesub?id=${id}`,
                success: ({ code, msg, data = {} } = res) => {
                    if (code == 200) {
                        let cateSub = data.data.children
                        // 根据二级分类数据拼接右侧字符串
                        let divStr = cateSub.map(item => {
                            return `<div class="row">
                                                <img src="${item.picture}"
                                                    alt="">
                                                <span>${item.name}</span>
                                            </div>`
                        }).join('')
                        // 将拼接好的字符串添加到右侧分类div中
                        document.querySelector('.cate_right').innerHTML = divStr
                    } else {
                        console.log(msg)
                    }
                },
                fail: err => console.log(err)
            })

        }
    </script>
</body>

</html>